<template>
  <div class="router-com">
    <div class="main">
      <a-card :bordered="false">
        <template #title>
          <a-space>
            <a-button type="primary" @click="handleAdd">新增</a-button>
            <a-button type="primary" danger @click="handleDeleteAll"
              >批量删除</a-button
            >
          </a-space>
        </template>
        <template #extra>
          <a-space>
            <a-input v-model:value="keyword" placeholder="请输入关键字" />
            <a-button type="primary" @click="handleSearch">查询</a-button>
            <a-button
              type="primary"
              style="background: #faad14; color: #ffffff"
              @click="handleReset"
              >重置</a-button
            >
          </a-space>
        </template>
        <a-table
          :columns="columns"
          :data-source="dataSource"
          :rowKey="(record) => record.id"
          :row-selection="{
            onChange: onSelectedChange,
            getCheckboxProps,
          }"
        >
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.key === 'serial'">
              {{ index + 1 }}
            </template>
            <template v-if="column.key === 'action'">
              <a type="link" @click="handleEdit(record)">编辑</a>
              <a-divider type="vertical" />
              <a type="link" @click="handleDelete(record)">删除</a>
            </template>
          </template>
        </a-table>
        <a-drawer
          :title="title"
          :width="720"
          :open="open"
          :body-style="{ paddingBottom: '80px' }"
          :footer-style="{ textAlign: 'right' }"
          @close="handleCencel"
        >
          <a-form :model="form" ref="formRef" :rules="rules" layout="vertical">
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="类型名" name="name">
                  <a-input
                    v-model:value="form.name"
                    placeholder="请输入类型名"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="24">
                <a-form-item label="描述" name="desc">
                  <a-textarea
                    v-model:value="form.desc"
                    :auto-size="{ minRows: 2, maxRows: 5 }"
                    placeholder="请输入描述"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
          <template #extra>
            <a-space>
              <a-button @click="handleCencel">取消</a-button>
              <a-button type="primary" @click="handleSubmit">提交</a-button>
            </a-space>
          </template>
        </a-drawer>
      </a-card>
    </div>
  </div>
</template>
<script>
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { createVNode } from "vue";
import { Modal, message } from "ant-design-vue";
const columns = [
  {
    title: "序号",
    dataIndex: "serial",
    key: "serial",
    align: "center",
    width: "200px",
  },
  {
    title: "类型名",
    dataIndex: "name",
    key: "name",
    align: "center",
    ellipsis: true,
  },
  {
    title: "描述",
    dataIndex: "desc",
    key: "desc",
    align: "center",
    ellipsis: true,
    sorter: (a, b) => a.name.length - b.name.length,
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    align: "center",
    width: "200px",
  },
];
const data = [
  {
    id: "1",
    name: "学业辅导互助",
    desc: "学生之间相互提供学习辅导和知识分享的支持。",
  },
  {
    id: "2",
    name: "心理咨询互助",
    desc: "提供情绪支持和心理咨询服务，帮助他人解决心理困扰。",
  },
  {
    id: "3",
    name: "语言交流互助",
    desc: "提供语言学习帮助，促进跨文化交流和语言技能提升。",
  },
  {
    id: "4",
    name: "阅读分享互助",
    desc: "共享书籍、阅读资源和阅读心得，推动阅读兴趣和知识传播。",
  },
  {
    id: "5",
    name: "体育运动互助",
    desc: "组织体育活动、训练和比赛，促进健康生活方式。",
  },
  {
    id: "6",
    name: "编程技能互助",
    desc: "分享编程知识和技能，进行编程项目合作和互助学习。",
  },
  {
    id: "7",
    name: "艺术创作互助",
    desc: "共同参与艺术创作项目，分享创作经验和艺术作品展示。",
  },
  {
    id: "8",
    name: "社团活动互助",
    desc: "协助社团组织活动，共同策划和执行社团项目。",
  },
  {
    id: "9",
    name: "实习就业互助",
    desc: "分享实习和就业经验，提供职业指导和求职支持。",
  },
  {
    id: "10",
    name: "电子产品维修互助",
    desc: "提供电子产品维修技术和知识，帮助解决电子设备问题。",
  },
  {
    id: "11",
    name: "美食烹饪互助",
    desc: "分享烹饪技巧和食谱，一起探索美食文化和健康饮食。",
  },
  {
    id: "12",
    name: "学术研究互助",
    desc: "合作进行学术研究项目，共享资源和研究成果。",
  },
  {
    id: "13",
    name: "健康生活互助",
    desc: "分享健康知识和生活习惯，促进身心健康和健康生活方式。",
  },
  {
    id: "14",
    name: "外语学习互助",
    desc: "提供外语学习支持和语言交流机会，提升语言能力。",
  },
  {
    id: "15",
    name: "社会实践互助",
    desc: "组织社会实践活动，参与社会服务和社区发展。",
  },
  {
    id: "16",
    name: "学科竞赛互助",
    desc: "组队参加学科竞赛，共同备战和提高竞赛成绩。",
  },
  {
    id: "17",
    name: "社交技巧互助",
    desc: "分享社交技巧和人际关系建立经验，提升社交能力。",
  },
  {
    id: "18",
    name: "旅行规划互助",
    desc: "合作规划旅行行程，分享旅行经验和旅游资讯。",
  },
  {
    id: "19",
    name: "创业创新互助",
    desc: "共同探索创业机会，提供创业资源和支持创新项目。",
  },
  {
    id: "20",
    name: "环保公益互助",
    desc: "参与环保活动和公益项目，保护环境和服务社区。",
  },
  {
    id: "21",
    name: "手工制作互助",
    desc: "分享手工制作技巧和创意，一起进行手工艺品制作。",
  },
  {
    id: "22",
    name: "摄影摄像互助",
    desc: "分享摄影技巧和摄影作品，共同探索摄影艺术。",
  },
  {
    id: "23",
    name: "健身健美互助",
    desc: "提供健身指导和健康生活建议，共同追求健美体魄。",
  },
  {
    id: "24",
    name: "组织管理互助",
    desc: "协助组织管理工作，共同规划和执行组织任务。",
  },
  {
    id: "25",
    name: "人际关系互助",
    desc: "提供人际关系建议和冲突解决方法，促进良好人际关系。",
  },
  {
    id: "26",
    name: "社区服务互助",
    desc: "参与社区服务项目，提供志愿者支持和服务社区。",
  },
  {
    id: "27",
    name: "志愿者招募互助",
    desc: "组织志愿者招募活动，共同参与社会公益事业。",
  },
  {
    id: "28",
    name: "网络安全互助",
    desc: "分享网络安全知识和防护技巧，保护个人信息安全。",
  },
  {
    id: "29",
    name: "学习资源共享互助",
    desc: "共享学习资料和资源，提供学习支持和学习交流机会。",
  },
  {
    id: "30",
    name: "生活技能互助",
    desc: "分享实用生活技能和经验，提供生活问题解决方案。",
  },
];

export default {
  name: "",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      keyword: "",
      columns,
      data,
      dataSource: data,
      selectedRowKeys: [],
      selectedRows: [],
      open: false,
      title: "",
      rules: {
        name: [{ required: true, message: "请输入类型名" }],
        desc: [{ required: true, message: "请输入描述" }],
      },
      form: {
        id: "",
        name: "",
        desc: "",
      },
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    handleSubmit() {
      const index = this.data.findIndex((item) => item.id == this.form.id);
      this.data[index] = JSON.parse(JSON.stringify(this.form));
      this.dataSource = JSON.parse(JSON.stringify(this.data));
      this.open = false;
      message.success("操作成功");
    },
    handleCencel() {
      this.form = {};
      this.open = false;
    },
    handleAdd() {
      this.form = {};
      this.title = "新增";
      this.open = true;
    },
    handleDeleteAll() {
      this.dataSource = this.data.filter(
        (item) => !this.selectedRowKeys.includes(item.id)
      );
      message.success("操作成功");
    },
    handleSearch() {
      this.dataSource = this.data.filter((item) =>
        item.name.includes(this.keyword)
      );
      message.success("查询成功");
    },
    handleReset() {
      this.keyword = "";
      this.dataSource = JSON.parse(JSON.stringify(this.data));
      message.success("重置成功");
    },
    handleEdit(record) {
      this.form = JSON.parse(JSON.stringify(record));
      this.title = "新增";
      this.open = true;
    },
    handleDelete(record) {
      Modal.confirm({
        title: "温馨提示",
        icon: createVNode(ExclamationCircleOutlined),
        content: "请确认是否删除 ...",
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          const index = this.dataSource.findIndex(
            (item) => item.id == record.id
          );
          this.dataSource.splice(index, 1);
          message.success("删除成功");
        },
        onCancel: () => {},
      });
    },
    onSelectedChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
    },
    getCheckboxProps(record) {
      return {
        disabled: record.name === "Disabled User", // Column configuration not to be checked
        name: record.name,
      };
    },
  },
};
</script>
<style lang='scss' scoped>
.router-com {
  .main {
    padding: 16px;
  }
}
</style>